<template>
  <!-- 下拉菜单 -->
  <div class="select-main">
    <!-- 下拉框 -->
    <div class="select">
      <div class="value">
        {{ value }}
      </div>
      <div class="arrow" @click="changeOptions">
        <i :class="arrowClassName" class="iconfont"></i>
      </div>
    </div>
    <!-- 下拉列表 -->
    <div class="options" v-show="isOptionsVisible">
      <div class="option" v-for="(item, index) in list" :key="item" @click="value = item; changeOptions();">{{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 下拉列表
defineProps(['list'])

const value = defineModel()
// 下拉框显示状态
const isOptionsVisible = ref(false);
// 箭头状态
const arrowClassName = ref('icon-xiala');

//  切换下拉框显示状态
const changeOptions = () => {
  isOptionsVisible.value = !isOptionsVisible.value;
  arrowClassName.value = isOptionsVisible.value ? 'icon-shangla' : 'icon-xiala';
};
defineExpose([value])

</script>

<style lang="scss" scoped>
// 下拉菜单
.select-main {
  position: relative;
  background-color: #fff;
  width: 20%;

  // 下拉框
  .select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #eee;
    padding: .03rem .1667rem;

    .value {
      font-size: 0.3rem;
      text-align: center;
    }

    .arrow {
      i {
        font-weight: lighter;
        font-size: 0.3rem;
        color: #999;
      }
    }
  }

  // 下拉列表
  .options {
    position: absolute;
    background-color: #fff;
    border: 1px solid #eee;
    width: 100%;
    max-height: 3rem;
    overflow: auto;

    //滚动条样式
    &::-webkit-scrollbar {
      width: 0.1rem;
      height: 0.1rem;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 0.1rem;
    }

    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 0.1rem;
    }

    .option {
      padding: .1rem;
      font-size: 0.3rem;
      text-align: center;
      cursor: pointer;

      &:hover {
        background-color: #f3f3f3;
      }
    }
  }
}
</style>